<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>餐饮特色推荐菜单作业</title>

	<meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="lib/lib/css/bootstrap.min.css" rel="stylesheet">
 <style type="text/css">
	
	 .tab-content{
            margin: 5px;
            text-align: center;/*居中显示*/
        }





</style>
</head>
<body>

<div class="container">
    <p class="visible-xs">现在是xs</p>
    <p class="visible-sm">现在是sm</p>
    <p class="visible-md">现在是md</p>
    <p class="visible-lg">现在是lg</p>
</div>

<div class="container">
<div class="choose">

	<div class="row">
		<div class="col-md-12">
			<!-- 标题 -->
			<div class="navbar-header hidden-xs">
				<a href="#" class="navbar-brand"><img src="images/ (1).jpg" sizes="100px"></a>
			</div>
			<!-- 选项卡菜单 -->
			<ul class="nav nav-pills navnar-right" role="tablist" style="margin-right:0">
				<li role="resentation" class="active">
					<a href="#caipin" role="tab" data-toggle="tab">菜品</a>
				</li>
				<li role="presentation"><a href="#yinpin" role="tab" data-toggle="tab">饮品</a></li>
				<li role="presentation"><a href="#zhushi" role="tab" data-toggle="tab">主食</a></li>
			</ul>

		</div>
	</div>


	<div class="row">
	 <div class="col-md-12" style="border:1px solid red;">
	  <div class="tab-content">

		<!-- 菜品-->
		<div class="tab-pane active" role="tabpanel" id="caipin">
			<div class="col-md-2 col-sm-4 col-xs-6">
				<img src="images/ (2).jpg" alt="">
				<p>菜品</p>
				<p>￥145.0</p>
			</div>

			<div class="product-item col-md-2 col-sm-4 col-xs-6">
				<img src="images/ (2).jpg" alt="">
				 <p>菜品</p>
                 <p>￥165.0</p>
			</div>
			<div class="product-i col-md-2 col-sm-4 col-xs-6">
				<img src="images/ (2).jpg" alt="">
				 <p>菜品</p>
                 <p>￥165.0</p>
			</div>
			<div class="product-item col-md-2 col-sm-4 col-xs-6">
				<img src="images/ (2).jpg" alt="">
				 <p>菜品</p>
                 <p>￥165.0</p>
			</div>
			<div class="product-item col-md-2 col-sm-4 col-xs-6">
				<img src="images/ (2).jpg" alt="">
				 <p>菜品</p>
                 <p>￥165.0</p>
			</div>
			<div class="product-item col-md-2 col-sm-4 col-xs-6">
				<img src="images/ (2).jpg" alt="">
				 <p>菜品</p>
                 <p>￥165.0</p>
			</div>
		</div>

		<!-- 饮品 -->
		<div class="tab-pane" id="yinpin" role="tabpanel">
			<div class="product-item col-md-2 col-sm-4 col-xs-6">
				<img src="images/ (2).jpg" alt="">
				  <p>饮品</p>
                  <p>￥98.0</p>
			</div>

			<div class="product-item col-md-2 col-sm-4 col-xs-6">
				<img src="images/ (2).jpg" alt="">
				  <p>饮品</p>
                  <p>￥98.0</p>
			</div>
		</div>

		<!-- 主食 -->
		<div class="tab-pane" role="tabpanel" id="zhushi">
			<div class="product-item col-md-2 col-sm-4 col-xs-6">
                <img src="images/ (2).jpg"/>
                <p>主食</p>
                <p>￥56.0</p>
             </div>
             <div class="product-item col-md-2 col-sm-4 col-xs-6">
                <img src="images/ (2).jpg"/>
                <p>主食</p>
                <p>￥56.0</p>
             </div>
             <div class="product-item col-md-2 col-sm-4 col-xs-6">
                <img src="images/ (2).jpg"/>
                <p>主食</p>
                <p>￥56.0</p>
             </div>
             <div class="product-item col-md-2 col-sm-4 col-xs-6">
                <img src="images/ (2).jpg"/>
                <p>主食</p>
                <p>￥56.0</p>
             </div>
             
		</div>




	  </div>
	 </div>
	</div>



</div>
</div>


<br><br>
<script src="lib/jquery/jquery-1.11.0.min.js"></script>
<script src="lib/lib/js/bootstrap.min.js"></script>
</body>
</html>